<template>
  <div>
    <div class="filter-condition">
      <a-space style="margin-bottom: 10px;margin-right: 16px;">
        <span>时间范围：</span>
        <a-radio-group buttonStyle="solid" v-model="queryParam.warningTimeType" class="area-linkage">
          <a-radio-button v-for="(item, key) in optionsTimes" :key="key" :value="item.value">
            {{ item.text }}
          </a-radio-button>
        </a-radio-group>
        <span class="date-range-picker" v-if="queryParam.warningTimeType === '0'" style="width: 15vw">
          <a-date-picker
            v-model="queryParam.warningStartTime"
            placeholder="开始日期"
            :disabled-date="disabledStartDate"
            valueFormat="YYYY-MM-DD"
            @openChange="handleOpenChange($event, 'start')"
          />
          <span class="line">-</span>
          <a-date-picker
            v-model="queryParam.warningEndTime"
            placeholder="结束日期"
            :disabled-date="disabledEndDate"
            valueFormat="YYYY-MM-DD"
            :open="endOpen"
            @openChange="handleOpenChange($event, 'end')"
          />
        </span>
        <!-- <a-range-picker
          v-show="queryParam.warningTimeType === '0'"
          :allowClear="true"
          v-model="rangePickerTime"
          valueFormat="YYYY-MM-DD"
          :disabled-date="disabledDate"
          @change="rangePickerChange"
          @calendarChange="calendarPriceRangeChange"
          style="width: 14vw"
        /> -->
        <span v-if="show" class="xzqh">行政区划：</span>
        <div v-if="show" class="area-linkage xzqh">
          <z-linkage-area :disabled="[true]" placeholder="请选择" v-model="codes" @changeLabel="getChangeLabel" />
        </div>
        <span v-if="show" class="sjly">数据来源：</span>
        <j-dict-select-tag
          class="sjly"
          v-if="show"
          v-model="queryParam.sourceFrom"
          placeholder="请选择"
          dictCode="dataSource"
          style="width: 100px"
        />
      </a-space>
      <div class="btnBox">
        <a-button type="primary" @click="onQuery">确 定</a-button>
        <a-button @click="onReset()">重 置</a-button>
        <a-button type="primary" @click="download()">导出</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getXzqhList } from '@/api/api'
export default {
  props: {
    // 是否开启限制时间
    isLimitingTirre: {
      type: Boolean,
      default: true
    },
    // 显示项
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      prodces: [{ code:'220000',label: '吉林省' }],
      endOpen: false,
      codes: [],
      districtData: [],
      rangePickerTime: [],
      optionsTimes: [
        { value: '2', text: '今天' },
        { value: '4', text: '近一周' },
        { value: '5', text: '近一月' },
        { value: '0', text: '自定义' },
      ],
      queryParam: {
        warningTimeType: '2',
        xzqh: undefined,
      },
      priceRangeDate: [],
      selectPriceDate: '',
      offsetDays: 86400000 * 365, //最多选择365天【一年】
    }
  },
   watch:{
    'codes': {
      immediate: true,
      handler(val) {
        if(val.length===3) {
          this.$set(this.queryParam, 'prov', val[0])
          this.$set(this.queryParam, 'city', val[1])
          this.$set(this.queryParam, 'district', val[2])
        } else if (val.length===2) {
          this.$set(this.queryParam, 'prov', val[0])
          this.$set(this.queryParam, 'city', val[1])
          this.$set(this.queryParam, 'district', null)
        } else if (val.length===1) {
          this.$set(this.queryParam, 'prov', val[0])
          this.$set(this.queryParam, 'city', null)
          this.$set(this.queryParam, 'district', null)
        } else if (val.length===0) {
          this.$set(this.queryParam, 'prov', null)
          this.$set(this.queryParam, 'city', null)
          this.$set(this.queryParam, 'district', null)
        }
      }
    }
  },
  mounted() {
    this.$set(this.codes, 0, this.prodces[0].code)
    this.$set(this.queryParam, 'prov', this.prodces[0].code)
    this.$set(this.queryParam, 'xzqh', this.prodces[0].label)
  },
  methods: {
    // 自定义时间
    rangePickerChange(date) {
      this.$set(this.queryParam, 'warningStartTime', date[0])
      this.$set(this.queryParam, 'warningEndTime', date[1])
    },
    onChangeCityData(key, field) {
      let params = {
        areaCode: key,
        flagRecursive: false,
        containsSelf: false  //true，获取areaCode的tree结构；false，获取areaCode的下级数组
      }
      getXzqhList(params).then(res => {
        if (res.success) {
          let data = res.result ? res.result : []
          this[field] = data.length>0 ? data.map(item=>{
            return {
              value: item.code.toString(),
              text: item.name
            }
          }): []
        }
      })
    },
    onQuery() {
      // console.log('queryParam', this.queryParam)
      if (this.queryParam.warningTimeType == '0' && !this.queryParam.warningStartTime) {
        this.$message.warning('请选择自定义时间')
        return
      }
      if (this.queryParam.warningTimeType != '0') {
        this.queryParam.warningStartTime = undefined
        this.queryParam.warningEndTime = undefined
        this.rangePickerTime = undefined
      }
      this.$emit('onQuery', this.queryParam)
    },
    onReset() {
      this.codes = []
      this.$set(this.codes, 0, this.prodces[0].code)
      this.rangePickerTime = undefined
      this.queryParam = {
        warningTimeType: '2',
        xzqh: undefined,
        prov: this.prodces[0].code,
        xzqh: this.prodces[0].label
      }
      this.$emit('onReset', this.queryParam)
    },
    // 获取行政区划中文名
    getChangeLabel(datas) {
      this.$set(this.queryParam, 'xzqh', datas.join(''))
    },
    // 下载PDF
    download() {
      this.$emit('onDownload')
    },
    //选择开始时间/结束时间
    calendarPriceRangeChange(date) {
      this.selectPriceDate = date[0]
      if (date.length>1) {
        //选择完时间 清空限制
        this.selectPriceDate = ''
      }
      // console.log(this.selectPriceDate)
    },
    //根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate(current) {
      if(!this.isLimitingTirre) return  //false不开启时间限制
      if (this.selectPriceDate) {
        let selectV = this.$JMoment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        console.log(current)
        // console.log(current, this.$JMoment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD'))
        // 选择日期不能小于当天，且可选择自定义offsetDays值范围内的天数
        return (
          current > this.$JMoment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
          current < this.$JMoment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD') ||
          current > this.$JMoment(new Date, 'YYYY-MM-DD')
        )
      } else {
        // return false
        return current && current > this.$JMoment().endOf('day')
      }
    },
    // 时间范围-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.queryParam).length > 0 && this.queryParam.warningEndTime
        ? this.$JMoment(this.queryParam.warningEndTime) : null
      if (!startValue || !endValue) {
        // return false
        return startValue && startValue > this.$JMoment().endOf('day')
      }
      return (
        startValue.valueOf() > endValue.valueOf() ||
        startValue.valueOf() <= this.$JMoment(new Date(endValue.valueOf() - this.offsetDays), 'YYYY-MM-DD').valueOf()
      )
    },
    // 时间范围-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.queryParam).length > 0 && this.queryParam.warningStartTime
      ? this.$JMoment(this.queryParam.warningStartTime) : null
      if (!endValue || !startValue) {
        // return false
        return endValue && endValue > this.$JMoment().endOf('day')
      }
      return (
        endValue.valueOf() <= startValue.valueOf() ||
        endValue.valueOf() > this.$JMoment(new Date, 'YYYY-MM-DD').valueOf() ||
        endValue.valueOf() >= this.$JMoment(new Date(startValue.valueOf() + this.offsetDays), 'YYYY-MM-DD').valueOf()
      )
    },
    // 时间范围-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    }
  }
}
</script>
<style lang="less" scoped>
.filter-condition {
  width: 100%;
  padding: 10px 24px 10px 24px;
  margin-bottom: 10px;
  background-color: white;
  display: flex;
  align-items: flex-start;
  flex-flow: wrap;
  /deep/.area-select.medium {
    width: 80px;
  }
  /deep/.area-select-wrap .area-select {
    margin-left: 0px;
    margin-right: 4px;
  }
  /deep/.area-select {
    line-height: 1.15;
  }
  /deep/.area-select .area-select-icon {
    display: none;
  }
  .btnBox {
    .ant-btn {
      margin-right: 20px;
    }
  }
}
.area-linkage {
  // width: 460px;
  display: flex;
  align-items: center;
  .select-tag {
    width: 120px !important;
    margin-right:4px;
  }
}
.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
